<template>
<div>
    <header >
        <a @click="back()" class="back"></a>
        <span>校区详情</span>
        <a class="add" @click="finish()" v-if="this.canEdit" >完成</a>
    </header>
    <div class="wrap select_class">
        <div class="model" @click="$api.clickModel(0)" v-if="!canEdit" ></div>
        <div class="main" @click="changePhoto()" >
            <div  class="flex">
                <div>校园主图</div>
            </div>
            <div @click.stop="$api.showImgDetail(detail.schoolPhoto)"><img class="image_wrap big" :src="$api.formatterImg(detail.schoolPhoto)"/></div>
        </div>
        <div class="main">
            <div class="flex">
                <div>校区编号</div>
            </div>
            <div><input @change="changeValue" readonly v-model="detail.schoolCode"/></div>
        </div>
        <div class="main">
            <div class="flex">
                <div>校区名称</div>
                <div class="red">*</div>
            </div>
            <div><input @change="changeValue" :readonly="canEdit" v-model="detail.schoolName"/></div>
        </div>
        <div class="main">
            <div class="flex">
                <div>校长名称</div>
            </div>
            <div><input @change="changeValue" readonly v-model="detail.schoolMaster"/></div>
        </div>
        <div class="main">
            <div class="flex">
                <div>联系电话</div>
            </div>
            <div><input @change="changeValue" readonly v-model="detail.phone"/></div>
        </div>
        <div class="main">
            <div class="flex">
                <div>所在地区</div>
            </div>
            <div><input @click="selectArea" readonly="readonly" v-model="detail.schoolArea"/></div>
        </div>
        <div class="main">
            <div class="flex">
                <div>详细地址</div>
            </div>
            <div><input @change="changeValue" v-model="detail.schoolAddress"/></div>
        </div>
        <div class="main " style="padding-bottom:0;border-bottom:0;">
            <div class="flex">
                <div>校区环境</div>
            </div>
        </div>
        <div class="main" style="justify-content:start">
            <div class="image_wrap" v-for="(img,index) in detail.filePathList" v-if="!img.flagDelete" >
                <div @click="deleteImg(index)" v-if="canEdit" class="deleteImg"></div>
                <img @click="$api.showImgDetail(img.filePath)" :src="$api.formatterImg(img.filePath)" />
            </div>
            <div class="image_wrap" @click="AddPhoto()" v-if="canEdit">
                <img src="../../static/images/other/add-img.png"/>
            </div>
        </div>
        <div class="main " style="padding-bottom:0;border-bottom:0;">
            <div class="flex">
                <div>校区简介</div>
            </div>
        </div>
        <div class="main " >
            <div class="textarea_wrap" style="width:100%;padding:0;">
                <textarea @change="changeValue" placeholder="请简单介绍学校"
                 v-model="detail.content" rows="4"></textarea>
            </div>
        </div>
        <div class="main" :class="{noClick:!canEdit}" @click="selectSchool(index)" v-for="(school,index) in schoolList" :key="index">
            <div class="flex">
                <img slot="icon" v-if="index&&canEdit" @click="DeleteServiceSchool(index)" src="../../static/images/other/remove-icon.png" width="30" height="30">
                <div>服务学校</div>
            </div>
            <div class="flex">
                <input class="desc" style="color:#2c3e50" readonly v-model="school.schoolName" placeholder="请选择服务学校" />
                <div v-if="canEdit" class="more"></div>
            </div>
        </div>
        <div @click="addSchool()" v-if="canEdit" class="row" >
            <img slot="icon" src="../../static/images/other/add-icon.png" width="30" height="30">
            <div style="height:30px;line-height:30px;">添加</div>
        </div>
        <getImage v-model='sheetVisible' ></getImage>
        <!-- <mt-cell v-for="(school,index1) in schoolList" :key="index1" class="cell" title="添加管理员" >
            <span ><div @click="AddAdmin(index1)" class="more"></div></span>
        </mt-cell> -->
    </div>
</div>
</template>

<script>
    import {
        MessageBox
    } from 'mint-ui';
    import getImage from '../components/getImage.vue'
    export default {
        data() {
            return {
                schoolList: [],
                sheetVisible: false,
                canEdit: false,
                detail: {
                    filePathList: []
                },
            }
        },
        methods: {
            DeleteServiceSchool(index) {
                this.schoolList.splice(index, 1);
            },
            addSchool() {
                if (this.schoolList.length < 5) {
                    this.schoolList.push({
                        empty: true,
                        schoolName: '',
                        regionSchoolId: '',
                    });
                } else {
                    MessageBox('提示', '服务学校最多只能选择五个');
                }
            },
            back() {
                this.$router.push({
                    path: 'workbench'
                })
            },
            deleteImg(index) {
                // this.detail.filePathList[index].flagDelete = 1;
                this.$set(this.detail.filePathList[index], 'flagDelete', 1);
                this.changeValue();
            },
            getSchoolList() {
                let schoolList = JSON.parse(sessionStorage.getItem('schoolList'));
                if (schoolList) {
                    this.schoolList = schoolList
                } else {
                    return;
                }
                let radioBackOptions = JSON.parse(sessionStorage.getItem('radioBackOptions'));
                if (radioBackOptions) {
                    this.schoolList = this.schoolList.map(element => {
                        if (element.select) {
                            element = radioBackOptions.item
                        }
                        return element;
                    });
                }
                sessionStorage.setItem('schoolList', JSON.stringify(this.schoolList));
                sessionStorage.removeItem('radioBackOptions');
            },
            changeValue() {
                sessionStorage.setItem('detail', JSON.stringify(this.detail));
            },
            AddAdmin() { //添加管理员

            },
            AddPhoto() { //打开照片选择器
                if (!this.canEdit) return;
                var array = this.detail.filePathList.filter(o => {
                    return !o.flagDelete;
                })
                if (array.length > 8) {
                    MessageBox('提示', '校区环境图片不要超过9张');
                    return;
                }
                this.sheetVisible = true;
                sessionStorage.setItem('photoType', '2'); //风采用的图片
            },
            changePhoto() {
                if (!this.canEdit) return;
                this.sheetVisible = true;
                sessionStorage.setItem('photoType', '1'); //头像用的图片
            },
            getImageBack() { //
                var filepath = JSON.parse(sessionStorage.getItem('imgOption'));
                debugger
                if (filepath) {
                    var type = sessionStorage.getItem('photoType');
                    switch (type) {
                        case '1':
                            this.detail.schoolPhoto = filepath.filePath;
                            this.detail.baseFileId = filepath.baseFileId
                            break;
                        case '2':
                            this.detail.filePathList.push(filepath);
                            break;
                    }
                    console.log(JSON.parse(JSON.stringify(filepath)));
                    sessionStorage.removeItem('imgOption');
                }
            },
            finish() { //完成
                var url = "/school/save"
                var params = JSON.parse(JSON.stringify(this.detail))
                console.log(JSON.parse(JSON.stringify(params)));
                params.filePathList = JSON.stringify(params.filePathList);
                if (params.content.length >= 255) {
                    MessageBox('提示', '校园简介字数不能超过255!');
                    return;
                }
                var serviceSchools = '';
                if (this.schoolList) {
                    this.schoolList.forEach(element => {
                        serviceSchools += element.regionSchoolId + ','
                    });
                }
                params.serviceSchools = serviceSchools;
                this.$api.post(url, params, (data) => {
                    MessageBox('提示', '保存成功');
                    this.$api.clearItem();
                    this.getDetail();
                })
            },
            selectSchool(index) {
                this.schoolList[index].select = true;
                sessionStorage.setItem('schoolList', JSON.stringify(this.schoolList));
                var AreaOptions = {
                    title: '选择服务学校',
                    typeId: 1,
                }
                sessionStorage.setItem('AreaOptions', JSON.stringify(AreaOptions));
                this.$router.push({
                    'path': '/selectProvince'
                })
            },
            selectArea() {
                if (!this.canEdit) return;
                var AreaOptions = {
                    title: '选择所在地区',
                    typeId: 2,
                }
                sessionStorage.setItem('AreaOptions', JSON.stringify(AreaOptions));
                this.$router.push({
                    'path': '/selectProvince'
                })
            },
            getUseInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
                this.canEdit = this.useInfo.tsMenuList[0].voOperate.editObj
            },
            getAreaBack() { //获取地区回调
                var AreaBackOptions = JSON.parse(sessionStorage.getItem('AreaBackOptions'));
                if (AreaBackOptions) {
                    this.detail.schoolCode = AreaBackOptions.schoolCode;
                    this.detail.schoolArea = AreaBackOptions.schoolArea;
                }
            },
            getDetail() {
                var url = "/school/find"
                var params = {
                    schoolId: this.useInfo.schoolId
                }
                var detail = JSON.parse(sessionStorage.getItem('detail'));
                if (detail) { //有缓存detail就直接用
                    this.detail = detail
                    this.getSchoolList();
                    this.getImageBack();
                    this.getAreaBack();
                    this.changeValue();
                } else {
                    this.$api.post(url, params, (data) => {
                        console.log(JSON.parse(JSON.stringify(data)))
                        let detail = data.info.tsSchoolEntity;
                        detail.filePathList = data.info.filePathList;
                        this.schoolList = data.info.rsList;
                        sessionStorage.setItem('schoolList', JSON.stringify(this.schoolList));
                        this.detail = detail;
                        this.changeValue();
                        // this.getRadioBack();
                    })
                }

            },
        },
        components: {
            getImage
        },
        created() {
            this.getUseInfo();
            this.getDetail();
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .wrap {
        text-align: left;
        background: white;
    }
    
    .row {
        display: flex;
        padding: 0.4rem 0.5rem;
        font-size: 16px;
    }
    
    .school_img {
        width: 2rem;
        margin: 0.3rem 0;
    }
    
    .wrap .cell {
        padding-left: 0.4rem;
        border-bottom: 1px solid #f2f2f2;
        padding-right: 0.4rem;
    }
    
    .cell .more {
        margin-left: 0.37333rem;
    }
    
    .scool_wrap {
        padding: 0.1rem 0.4rem 0.4rem;
        border-bottom: 1px solid #f2f2f2;
    }
    
    .scool_wrap .title {
        height: 1.2rem;
        padding: 0 10px;
        line-height: 1.2rem;
        font-size: 16px;
        text-align: left;
    }
    
    .imgwrap {
        display: flex;
        padding-left: 0.3rem;
    }
    
    .imgwrap img {
        height: 1.3rem;
        margin-right: 0.2rem;
    }
    
    .service_school {
        background: none;
        border: none;
        outline: none;
        text-align: right;
    }
</style>